<template>
    <el-row class="monitor-mian warp">
        <el-col :span="3" class="publicNav" style="height:100%">
            <ul>
                <router-link active-class="newnava" v-for='items in navalist' :to="items.path">
                    {{items.name}}
                </router-link>
            </ul>
        </el-col>
        <el-col :span="21" style="height:100%">
            <router-view></router-view>
        </el-col>
    </el-row>
</template>
<script>
export default {
  name: 'Monitor',
  data () {
    return {
        navalist:[
            {
            "path":"/layout/Monitor/environment",
            "name":"环境模块",
            "newnava":false
      },
      {
            "path":"/layout/Monitor/power",
            "name":"动力模块",
            "newnava":false
      }/*,
      {
            "path":"/layout/Monitor/safe",
            "name":"安防模块",
            "newnava":false
      },
      {
            "path":"/layout/Monitor/fire",
            "name":"消防模块",
            "newnava":false
      }*/
        ]
    }
  },
  created(){

      /*let that=this;
     this.$ajax.get("./static/monitor.json").then( function(res){
          that.$data.navalist=res.data;
      })*/
    }
  }

</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .nava{
    background: #f2f2f2;
  }
  .nava a{
    width: 100%;
    height: 40px;
    line-height: 40px;
    text-align: center;
    color: #000;
    display: block;

  }
  .nava a:hover,.nava .newnava{
    background: #0080c0;
    cursor: pointer;
    color: #fff;
  }
</style>
